
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/element.css">
    <style>
        #app{
            width:90%;
            margin: auto;
        }
        h2{
            margin: 10px;
            
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>公告</h2>
        <el-table v-loading="loading" :data="rows" >
            <el-table-column type="selection" width="55"  />
            <el-table-column label="标题"  prop="postId" />
            <el-table-column label="作者"  prop="name" />
            <el-table-column label="发表日期"  prop="time" />
            <el-table-column label="操作"  prop="look" >
                <template slot-scope="scope">
                    <el-link @click="showNotify(scope.row.look)">内容</el-link>
                  </template>
                </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 30px;">
            <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total,prev, pager, next, jumper"
            :total="planList.length">
            </el-pagination>
          </div>
        <h2>待办事项</h2>
        <el-table v-loading="loading" :data="rows" >
            <el-table-column type="selection" width="55"  />
            <el-table-column label="类型"  prop="postId"/>
            <el-table-column label="内容"  prop="name" />
            <el-table-column label="时间"  prop="time" />
            <el-table-column label="操作"  prop="look" >
              <template slot-scope="scope">
                <el-link @click="showNotify(scope.row.look)">内容</el-link>
              </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 30px;">
            <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total,prev, pager, next, jumper"
            :total="planList.length">
            </el-pagination>
          </div>
    </div>
</body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<script>
    /* eslint-disable */
 var vue = new Vue({
     el:'#app',
     data(){
        return {
       //翻页相关数据
                currentPage: 1,
                pageSize: 5,
                //查询表单
                searchForm: {
                    name: '',
                    time: undefined,
                    page:1,
                    size:9999999
                },
                planList:[],
                formLabelWidth: '120px',
                  rows:[
                  {
                      postId:'美好的一天',
                      name:'张三',
                      time:'2021-6-21',
                      look:"你好呀你好呀你好呀你好呀年好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀"
                  },{
                    postId:'1234',
                      name:'李四',
                      time:'2021-6-21',
                      look:"查看2"
                  },{
                    postId:'67899',
                      name:'王五',
                      time:'2021-6-22',
                      look:"查看3"
                  }
              ]
            }
      },
      methods: {
          showNotify:function(value){
        	  layer.open({
                  type: 1,
                  title: '查看通知',
                  shadeClose: true,
                  shade: false,
                  maxmin: true, //开启最大化最小化按钮
                  area: ['860px', '600px'],
                  content: '<h3>'+this.formatValue(value)+'</h3>'
              });
          },
          formatValue:function(value){
        	  var temp = '<p style="font-size:20px;text-align:center; text-align:justify;margin:5% 5%;">@value</p>'; 
        	  return temp.replace(/@value/,value);
          },
          handleCurrentChange(val) {
                this.currentPage = val;
            }
      }
 })
</script>
</html>